<template>
    <div id="video" class="video-view">
        <Map ref="mapRef" @map-loaded="onMapLoaded" @full-screen="handleFullScreen('video')" />
        <div class="video-container">
            <video ref="videoRef" class="video-element" crossorigin="anonymous" loop :muted="false" controls>
                <source :src="videoUrl" type="video/mp4">
            </video>
        </div>
        <div class="control-panel">
            <CesiumButton type="primary" @click="toggleVideo">
                {{ isPlaying ? '暂停' : '播放' }}
            </CesiumButton>
            <CesiumButton type="warning" @click="resetVideo">
                重置
            </CesiumButton>
        </div>
    </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import Map from '@/components/Map.vue'
import * as Cesium from 'cesium'
import { CesiumButton } from '@/components/cesium'

const mapRef = ref(null)
const videoRef = ref(null)
const isPlaying = ref(false)
const videoUrl = ref('/video/test.mp4')

let cesiumTools = null
let viewer = null
let videoEntity = null

// 地图加载完成的回调
const onMapLoaded = (tools, viewerInstance) => {
    cesiumTools = tools
    viewer = viewerInstance
    initVideo()
}

// 初始化视频实体
const initVideo = () => {
    if (!videoRef.value) return

    // 创建材质
    const videoMaterial = new Cesium.ImageMaterialProperty({
        image: videoRef.value,
        transparent: true
    })

    // 创建实体对象
    let rectangle = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(118.6383, 24.9114, 5),
        rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(118.6383, 24.9114, 118.6383 + 0.003, 24.9114 + 0.003),
            material: videoMaterial
        },
    });
    // 设置相机视角
    viewer.zoomTo(rectangle)


    let synchronizer = new Cesium.VideoSynchronizer({
        clock: viewer.clock,
        element: videoRef.value,
    });
    viewer.clock.shouldAnimate = true;
}

// 播放/暂停视频
const toggleVideo = () => {
    if (!videoRef.value) return

    if (videoRef.value.paused) {
        videoRef.value.play()
        isPlaying.value = true
    } else {
        videoRef.value.pause()
        isPlaying.value = false
    }
}

// 重置视频
const resetVideo = () => {
    if (!videoRef.value) return

    videoRef.value.currentTime = 0
    if (!videoRef.value.paused) {
        videoRef.value.play()
    }
}

// 处理全屏
const handleFullScreen = (id) => {
    cesiumTools?.divFullScreen(id)
}

// 组件卸载前清理资源
onBeforeUnmount(() => {
    if (videoRef.value) {
        videoRef.value.pause()
        videoRef.value.src = ''
    }

    if (viewer && videoEntity) {
        viewer.entities.remove(videoEntity)
        videoEntity = null
    }
})
</script>

<style scoped lang="scss">
.video-view {
    width: 100%;
    height: 100vh;
    position: relative;
}

.control-panel {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    gap: 10px;
}

.video-container {
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    width: 320px; // 可以调整视频容器的宽度
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.video-element {
    width: 100%;
    display: block;
    border-radius: 2px;
}
</style>